<template>
	<view>
		<view class="center-top">
			<view class="center-txt">个人中心</view>
			<view class="users">
				<view class="userface">
					<image class="userhead" src="../../static/个人/椭圆 119@2x.png" mode=""></image>
					<text class="hello">HI,{{userInfo.nickName}}</text>
					<view class="usertip">理财达人</view>
					<view class="usertype">{{userInfo.idcard?'已实名':'未实名'}}></view>
				</view>
				<view class="usercheck">
					<image class="hong" src="../../static/mine/bao.png" mode=""></image>
					<text class="check">签到</text>
				</view>
			</view>
			<view class="myticket">
				<view class="ticket-item">
					<text class="money">{{userInfo.integral}}</text>
					<text class="mynum">我的积分</text>
				</view>
				<navigator url="../bill/bill">
					<view class="ticket-item">
						<text class="money">{{bills}}</text>
						<text class="mynum">我的账单</text>
					</view>
				</navigator>
				<view class="ticket-item">
					<text class="money">0</text>
					<text class="mynum">权益包</text>
				</view>
				<view class="ticket-item">
					<text class="money">{{userInfo.balance}}</text>
					<text class="mynum">我的余额</text>
				</view>
			</view>
		</view>
		<view class="property">
			<view class="my-property">
				<view class="watch">
					<text>我的资产</text>
					<image class="eyes" src="../../static/mine/eyes.png" mode=""></image>
				</view>
				<view class="upgrade">
					<text>账户保障可升级 ></text>
				</view>
			</view>
			<view class="property-mid">
				<navigator url="../total/total">
					<view class="mid-item">
						<text class="item-1">总资产</text>
						<text class="item-2">{{userInfo.balance}}</text>
						<text class="item-3">昨日收益 0.00</text>
					</view>
				</navigator>
				<view class="mid-item">
					<text class="item-1">总待还</text>
					<text class="item-2">0.00</text>
					<text class="item-3">暂无待还款项</text>
				</view>
			</view>
			<view class="property-borrow">
				<view class="borrow-item">
					<text class="item-one">白条额度</text>
					<text class="item-two">充话费减20</text>
				</view>
				<view class="borrow-item">
					<text class="item-one">可借现金</text>
					<text class="item-two">最高20万</text>
				</view>
				<view class="borrow-item">
					<text class="item-one">我的保险</text>
					<text class="item-two">0项</text>
				</view>
				<view class="borrow-item">
					<text class="item-one">我的账单</text>
					<text class="item-two">暂无交易</text>
				</view>
			</view>
		</view>
		<view class="own" >
			<view class="own-icon"></view>
			<text class="own-txt">专属权益</text>
		</view>
		<view class="cards">
			<view class="cards-item">
				<image class="cardimg" src="../../static/mine/star.png" mode=""></image>
				<text class="cardtxt">理财体验金</text>
			</view>
			<view class="cards-item">
				<image class="cardimg" src="../../static/mine/addone.png" mode=""></image>
				<text class="cardtxt">医疗急救卡</text>
			</view>
			<view class="cards-item">
				<image class="cardimg" src="../../static/mine/gifts.png" mode=""></image>
				<text class="cardtxt">天天有奖</text>
			</view>
			<view class="cards-item">
				<image class="cardimg" src="../../static/mine/serve.png" mode=""></image>
				<text class="cardtxt">我的客服</text>
			</view>
		</view>
		<view class="service" >
			<view class="service-icon"></view>
			<text class="service-txt">我的服务</text>
		</view>
		<view class="serve-list">
			<view class="serve-item">
				<view class="">
					<image class="serve-icon" src="../../static/mine/real.png" mode=""></image>
					<text class="serve-txt">实名认证</text>
				</view>
				<view class="across">
					>
				</view>
			</view>
			<view class="serve-item">
				<view class="">
					<image class="serve-icon" src="../../static/mine/safe.png" mode=""></image>
					<text class="serve-txt">安全服务</text>
				</view>
				<view class="across">
					>
				</view>
			</view>
			<view class="serve-item">
				<view class="">
					<image class="serve-icon" src="../../static/mine/believe.png" mode=""></image>
					<text class="serve-txt">信用评分</text>
				</view>
				<view class="across">
					>
				</view>
			</view>
			<view class="serve-item">
				<view class="">
					<image class="serve-icon" src="../../static/mine/lock.png" mode=""></image>
					<text class="serve-txt">隐私设置</text>
				</view>
				<view class="across">
					>
				</view>
			</view>
			<view class="serve-item">
				<view class="">
					<image class="serve-icon" src="../../static/mine/help.png" mode=""></image>
					<text class="serve-txt">辅助功能</text>
				</view>
				<view class="across">
					>
				</view>
			</view>
			<view class="serve-item">
				<view class="">
					<image class="serve-icon" src="../../static/mine/question.png" mode=""></image>
					<text class="serve-txt">帮助反馈</text>
				</view>
				<view class="across">
					>
				</view>
			</view>
			<view class="serve-item">
				<view class="">
					<image class="serve-icon" src="../../static/mine/alert.png" mode=""></image>
					<text class="serve-txt">关于</text>
				</view>
				<view class="across">
					>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:null
			}
			
			
		},
		onLoad(){
			
		},
		onShow() {
			const app=getApp().globalData;
			if(app.userInfo!=null){
				this.userInfo=app.userInfo;
			}
		}
		,
		methods: {
			
		}
	}
</script>

<style scoped>
.center-top{
	width: 100%;
	height: 480rpx;
	background-color: #3476F1;
		border-bottom-right-radius: 80rpx;
}
.center-txt{
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	color: #FFFFFF;
	font-size: 40rpx;
	font-weight: bold;
	text-align: center;
}
.users{
	width: 724rpx;
	height: 96rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-left: 24rpx;
	margin-top: 20rpx;
}
.userface{
	width: 350rpx;
	height: 96rpx;
}
.userhead{
	width: 90rpx;
	height: 90rpx;
	float: left;
}
.hello{
	color: #FFFFFF;
	font-size: 34rpx;
	font-weight: bold;
	display: block;
	margin-left: 110rpx;
}
.usertip{
	width: 110rpx;
	height: 34rpx;
	border: 1rpx solid #FFFFFF;
	color: #FFFFFF;
	font-size: 20rpx;
	border-radius: 50rpx;
	text-align: center;
	margin-left: 20rpx;
	display: inline-block;
}
.usertype{
	width: 100rpx;
	height: 34rpx;
	border: 1rpx solid #FFFFFF;
	color: #FFFFFF;
	font-size: 20rpx;
	border-radius: 50rpx;
	text-align: center;
	margin-left: 20rpx;
		display: inline-block;
}
.usercheck{
	width: 128rpx;
	height: 50rpx;
	background-color: #ffc364;
	border-bottom-left-radius: 20rpx;
	border-top-left-radius: 20rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.hong{
	width: 30rpx;
	height: 30rpx;
}
.check{
	font-size: 30rpx;
	color: #f96357;
}
.myticket{
	width: 700rpx;
	height: 120rpx;
	margin: 50rpx auto;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.ticket-item{
	width: 160rpx;
	height: 120rpx;
}
.money{
	display: block;
	color: #FFFFFF;
	text-align: center;
}
.mynum{
	display: block;
	color: #FFFFFF;
	text-align: center;
	font-size: 28rpx;
}
.property{
	width: 700rpx;
	height: 420rpx;
	border: 1rpx solid #ececec;
	/* box-shad ow: 0px 0px 5px #ececec; */
	box-sizing: border-box;
	background-color: #FFFFFF;
	border-radius: 20rpx;
	margin: 0 auto;
	position: relative;
	top: -100rpx;
	padding: 24rpx;
	overflow: hidden;
}
.my-property{
	width: 100%;
	height: 60rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	overflow: hidden;
}
.watch{
	font-size: 34rpx;
	font-weight: bold;
	width: 200rpx;
	line-height: 34rpx;
	height: 34rpx;
}
.eyes{
	width: 36rpx;
	height: 24rpx;
	margin-left: 10rpx;
}
.upgrade{
	font-size: 24rpx;
	color: #e2bc7f;
}
.property-mid{
	width: 700rpx;
	height: 200rpx;
	display: flex;
	margin-top: 40rpx;
	overflow: hidden;
}
.mid-item{
	width: 350rpx;
	height: 200rpx;
}
.item-1{
	display: block;
	font-size: 26rpx;
}
.item-2{
	display: block;
	font-weight: bold;
	font-size: 36rpx;
	height: 80rpx;
	line-height: 80rpx;
}
.item-3{
	font-size: 24rpx;
	color: #AEAEAE;
}
.property-borrow{
	width: 700rpx;
	height: 120rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	overflow: hidden;
}
.borrow-item{
	width: 160rpx;
	height: 120rpx;
	line-height: 40rpx;
}
.item-one{
	font-size: 22rpx;
	font-weight: bold;
	display: block;
}
.item-two{
	font-size: 22rpx;
	color: #AEAEAE;
	display: block;
}
.own{
	margin-left: 24rpx;
	display: flex;
	align-items: center;
	margin-top: -70rpx;
}
.own-icon{
	width: 10rpx;
	height: 32rpx;
	background-color: #3476F1;
	display: inline-block;
}
.own-txt{
	font-size: 32rpx;
	font-weight: bold;
	margin-left: 12rpx;
}
.cards{
	width: 700rpx;
	height: 180rpx;
	display: flex;
	margin: 20rpx auto;
	/* border: 1rpx solid #ececec; */
	box-shadow: 0px 0px 5px #ececec; 
	border-radius: 20rpx;
	box-sizing: border-box;
}
.cards-item{
	width: 180rpx;
	height: 200rpx;
	text-align: center;
	box-sizing: border-box;
}
.cardimg{
	width: 84rpx;
	height: 84rpx;
	display: block;
	margin-left: 45rpx;
	margin-top: 30rpx;
}
.cardtxt{
	display: block;
	color: #7c7c7c;
	font-size: 24rpx;
	margin-top: 20rpx;
}
.service{
	margin-left: 24rpx;
	display: flex;
	align-items: center;
	margin-top: 50rpx;
}
.service-icon{
	width: 10rpx;
	height: 32rpx;
	background-color: #3476F1;
	display: inline-block;
}
.service-txt{
	font-size: 32rpx;
	font-weight: bold;
	margin-left: 12rpx;
}
.serve-list{
	width: 700rpx;
	height: 600rpx;
	/* border: 1rpx solid #CCCCCC; */
	box-shadow: 0px 0px 5px #ececec; 
	border-radius: 20rpx;
	margin: 20rpx auto;
}
.serve-item{
	width: 700rpx;
	height: 86rpx;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.serve-icon{
	width: 30rpx;
	height: 30rpx;
	margin-left: 30rpx;
}
.serve-txt{
	font-size: 28rpx;
	color: #7c7c7c;
	margin-left: 14rpx;
}
.across{
	margin-right: 30rpx;
	color: #989898;
}
</style>
